import "./index.scss";
import { Layout  , Tag , Tooltip, Avatar , Button , Dropdown , Menu ,Modal } from 'antd';
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    UserOutlined,
    VideoCameraOutlined,
    UploadOutlined,
    PoweroffOutlined,
    ExclamationCircleOutlined,
    DownOutlined
  } from '@ant-design/icons';
  import {connect} from "react-redux"
  import React , {useRef} from "react"
import { mbdata } from "../../mobx/data";
import {observer} from "mobx-react"
import { roleList } from "../../utils";
import {withRouter} from "react-router-dom"
import { $http } from "../../api";
import { baseURL } from "../../api/request";
import { changecollapsed } from "../../redux/action";
const { Header } = Layout;

// @observer
function Head({collapsed,history ,dispatch}){
    const {userInfo} = mbdata;
    const file = useRef()
    const toggle = ()=>{
        dispatch(changecollapsed(!collapsed))
    }

    const uploadFile = ()=>{
        file.current.click();
    }

    const startSenfFile = ()=>{
        var filedata = file.current.files[0];   // 上传第一个文件
        console.log(filedata)
        var data = new FormData()
        data.append("avatar",filedata); 

        $http.uploadavatar(data)
        .then(res=>{
            console.log(res)
            if(res.code==200){
                // 更新 mobx数据 
                mbdata.changeUserInfo({
                    ...mbdata.userInfo,
                    avatar:res.path
                })
            }
        })
    }

    function logoutClick(){
        Modal.confirm({
            title: '退出登录警告',
            icon: <ExclamationCircleOutlined />,
            content: '你真的要退出登录吗?',
            okText: '确认',
            cancelText: '取消',
            onOk:()=>{
                sessionStorage.removeItem("token");
                mbdata.changeUserInfo(null);  // 清理用户信息 
                history.replace("/login");   // 不会产生前进后退 
            }
        });
    }
    return (
        <Header style={{display:'flex',color:"#fff",alignItems:'center',justifyContent:'space-between'}}>
            <div style={{height:40,lineHeight:'40px',color:"#fff",padding:"0 10px"}}>
                <span>
                {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                    className: 'trigger',
                    onClick: toggle,
                })}
                </span>
                <span style={{fontSize:20,marginLeft:10}}>
                    管理系统
                </span>
            </div>
            <marquee behavior="" direction="" style={{fontSize:24,margin:"0 20",color:"orange",padding:"0 20px",maxWidth:400}}>
               xxxxxxx
            </marquee>
            {
                userInfo && <div className="userinfo" style={{display:'flex',color:"#fff",alignItems:'center',justifyContent:'space-between'}}>
                    <Dropdown 
                        overlay={
                            <Menu>
                                <Menu.Item key={1} onClick={()=>history.push("/main/info")} >个人中心</Menu.Item>
                                <Menu.Item key={2} onClick={()=>history.push("/main/home")} >首页</Menu.Item>
                            </Menu>
                        }
                    >
                        <span style={{fontSize:20}}> {userInfo.account }  <DownOutlined /> </span>
                    </Dropdown>
                    
                    <Tag 
                        style={{margin:"0 0 0 10px"}}
                        color={roleList.find(item=>item.value == userInfo.role).color}
                    >
                        {roleList.find(item=>item.value == userInfo.role).text}
                    </Tag>
                    
                    <Tooltip  title="更新头像"  placement="top">
                        <input type="file" ref={file} style={{display:'none'}} onChange={startSenfFile} />
                        {   
                            userInfo.avatar?
                            <Avatar onClick={uploadFile} style={{margin:"0 0 0 10px",cursor:'pointer'}} shape="circle" src={userInfo.avatar.replace(/public/,baseURL)}  />
                            :
                            <Avatar onClick={uploadFile} style={{margin:"0 0 0 10px",cursor:'pointer'}} shape="circle" icon={<UserOutlined />}  />
                        }
                    </Tooltip>

                    <Tooltip  title="退出登录"  placement="top">
                        <Button onClick={logoutClick}  style={{margin:"0 0 0 10px"}}  shape="circle" type="danger" icon={<PoweroffOutlined />} ></Button>
                    </Tooltip>

                </div>
            }
        </Header>  
    )
}
// @connect
// @observer
// @withRouter
export default  connect(
    state=>{
        return {
            collapsed:state.getIn(['data','collapsed'])
        }
    },
    // dispatch=>({

    // })
)(withRouter(observer(Head)))